<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1500101_ab1tjdhocfb.css" />
		
		<script src="//at.alicdn.com/t/font_1500101_jaj8l8df2h.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.icon {
				width: 1em;
				height: 1em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
				color: #46BD55;
			}
		</style>
		
	</head>
	<body>
		<!-- 顶部绿色条 -->
		<div id="app">
			<div class="topnav">
				<div class="topnav-left">
					<i class="fa fa-clock-o"></i><i class="iconfont icon-dianhua"></i>&nbsp;<span>Mon - Sat 8.00 - 18.00. Sunday CLOSED</span>
				</div>
				<div class="topnav-right">
					<i class="fa fa-phone"></i><i class="iconfont icon-dianhua"></i>&nbsp;<span>Tel No. (+001) 123-456-789</span>
				</div>
			</div>
			<!-- 顶部导航栏 -->
			<div class="nav">
				<a class="nav-logo" href="#"><img src="img/logo.png" /></a>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#" onclick="showOrHide()">About Us </a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Projects</a></li>
					<li><a href="#">Pricing</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
				<div class="dropdown">
					<ul>
						<li><a href="#">Company</a></li>
						<li><a href="#">Our Team</a></li>
						<li><a href="#">News</a></li>
						<li><a href="#">Investors</a></li>
					</ul>
				</div>
			</div>
			<!-- 轮播图 -->
			<div class="carousel">
				<img src="img/slides/1.jpg" />
			</div>
			<!-- 轮播图下方的背景为白色的第一部分内容 -->
			<div class="content">
				<div class="container">
					<ul>
						<li>
							<div class="container-icon">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-fangzi-copy"></use>
								</svg>
							</div>
							<div class="container-words">
								<h4>NEW PROJECTS</h4>
								<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
							</div>
						</li>
						<li>
							<div class="container-icon">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-mengbanhangkonghangtian-huojianrocket"></use>
								</svg>
							</div>
							<div class="container-words">
								<h4>NEW PROJECTS</h4>
								<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
							</div>
						</li>
						<li>
							<div class="container-icon">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-wankeicon-"></use>
								</svg>
							</div>
							<div class="container-words">
								<h4>NEW PROJECTS</h4>
								<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
							</div>
						</li>
						<li>
							<div class="container-icon">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-tubiaozhizuomoban-"></use>
								</svg>
							</div>
							<div class="container-words">
								<h4>NEW PROJECTS</h4>
								<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
							</div>
						</li>
					</ul>
				</div>
				<div class="container-address">
					<h2><span>TREENDING</span> PROJECTS</h2>
					<p class="container-address-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
				</div>
				<div class="container-place">
					<ul>
						<li>
							<div class="container-place-img">
								<img src="img/img1.jpg" /></div>
							<p class="container-place-title">Apartments</p>
							<p class="container-place-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</li>
						<li>
							<div class="container-place-img">
								<img src="img/img2.jpg" /></div>
							<p class="container-place-title">Apartments</p>
							<p class="container-place-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</li>
						<li>
							<div class="container-place-img">
								<img src="img/img3.jpg" /></div>
							<p class="container-place-title">Apartments</p>
							<p class="container-place-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</li>
						<li>
							<div class="container-place-img">
								<img src="img/img4.jpg" /></div>
							<p class="container-place-title">Apartments</p>
							<p class="container-place-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</li>
					</ul>
				</div>
			</div>
			<!-- 标题为RECENT PRPERTIES的内容 -->
			<div class="recent">
				<div class="recent-title">
					<h2><span>RECENT</span> PRPERTIES</h2>
					<p class="recent-title-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
				</div>
				<div class="recent-container">
					<ul>
						<li>
							<div class="recent-container-img">
								<img src="img/img5.jpg" />
							</div>
							<p class="recent-container-title">Apartments</p>
							<p class="recent-container-title-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</li>
						<li>
							<div class="recent-container-img">
								<img src="img/img6.jpg" />
							</div>
							<p class="recent-container-title">Apartments</p>
							<p class="recent-container-title-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</li>
						<li>
							<div class="recent-container-img">
								<img src="img/img7.jpg" />
							</div>
							<p class="recent-container-title">Apartments</p>
							<p class="recent-container-title-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</li>
						<li>
							<div class="recent-container-img">
								<img src="img/img8.jpg" />
							</div>
							<p class="recent-container-title">Apartments</p>
							<p class="recent-container-title-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</li>
						<li>
							<div class="recent-container-img">
								<img src="img/img9.jpg" />
							</div>
							<p class="recent-container-title">Apartments</p>
							<p class="recent-container-title-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</li>
						<li>
							<div class="recent-container-img">
								<img src="img/img10.jpg" />
							</div>
							<p class="recent-container-title">Apartments</p>
							<p class="recent-container-title-memo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</li>
					</ul>
				</div>
			</div>
			<!-- 标题为ABOUT OUR COMPANY的内容 -->
			<div class="recent company">
				<div class="recent-title">
					<h2><span>ABOUT</span> OUR COMPANY</h2>
					<p class="recent-title-memeo">1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
				</div>
				<div class="company-container">
					<div class="company-container-left">
						<p class="company-container-left-memo">
							1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦
						</p>
						<p class="company-container-left-item">
							<i></i><span>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</span>
						</p>
						<p class="company-container-left-item">
							<i></i><span>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</span>
						</p>
						<p class="company-container-left-item">
							<i></i><span>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</span>
						</p>
						<p class="company-container-left-item">
							<i></i><span>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</span>
						</p>
						<p class="company-container-left-more">Learn More</p>
					</div>
					<div class="company-container-right">
						<img src="img/about.jpg" />
					</div>
				</div>
			</div>
			<!-- 底部内容 -->
			<div class="foot">
				<div class="foot-container">
					<ul>
						<li>
							<div class="foot-container-contact">
								<p class="foot-container-contact-title">Our Contact</p>
								<p class="foot-container-contact-inc">
									<span>MyHome Inc</span><br />
									JC Main Road, Near Silnile tower<br />
									Pin-21542 NewYour US.
								</p>
								<p class="foot-container-contact-code">
									(123) 456-789 - 1255-125584<br />
									email@domainname.com
								</p>
							</div>
						</li>
						<li>
							<div class="foot-container-contact foot-container-links">
								<p class="foot-container-contact-title foot-container-links-title">Quick Likns</p>
								<div><a href="#">Latest Event</a></div>
								<div><a href="#">Terms and conditions</a></div>
								<div><a href="#">Privacy policy</a></div>
								<div><a href="#">Career</a></div>
								<div><a href="#">Contact us</a></div>
							</div>
						</li>
						<li>
							<div class="foot-container-contact foot-container-links">
								<p class="foot-container-contact-title foot-container-links-title">Latest posts</p>
								<div><a href="#">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</a></div>
								<div><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></div>
								<div><a href="#">Natus error sit voluptatem accusantium doloremque</a></div>
							</div>
						</li>
						<li>
							<div class="foot-container-contact foot-container-links">
								<p class="foot-container-contact-title foot-container-links-title">Latest posts</p>
								<div><a href="#">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</a></div>
								<div><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></div>
								<div><a href="#">Natus error sit voluptatem accusantium doloremque</a></div>
							</div>
						</li>
					</ul>
					<p class="foot-copyright">Copyright ©️ 2017.Company name All rights reserved.<a target="_blank" href="http://www.17sucai.com">网页模板</a></p>
					<div class="social-network">
						<ul>
							<li><a href="#" data-placement="top" title="Facebook"><svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-webfacebook"></use>
								</svg></a></li>
							<li><a href="#" data-placement="top" title="Twitter"><svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-twttier"></use>
								</svg></a></li>
							<li><a href="#" data-placement="top" title="Linkedin"><svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-linkedin"></use>
								</svg></a></li>
							<li><a href="#" data-placement="top" title="Pinterest"><svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-pinterest"></use>
								</svg></a></li>
							<li><a href="#" data-placement="top" title="Google plus"><svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-google"></use>
								</svg></a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 置顶图标 -->
			<a class="scrollup" onclick="scrollO()"><svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-mengbanhangkonghangtian-huojianrocket"></use>
								</svg></a>
		</div>

	</body>
</html>
